/**
 * Copyright (c) PingCAP, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
@import "./data-explore.css";

:root {
  /*
  See css var + hsl color palette technique:
  https://blog.maximeheckel.com/posts/the-power-of-composition-with-css-variables/
   */
  --site-primary-hue-saturation: 47, 100%;
  --site-primary-hue-saturation-light: 47, 110%; /* do we really need this extra one? */

  --ifm-color-primary: hsl(var(--site-primary-hue-saturation), 79.2%);
  --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation), 75%);
  --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation), 72%);
  --ifm-color-primary-darkest: hsl(var(--site-primary-hue-saturation), 66%);

  --ifm-color-primary-light: hsl(var(--site-primary-hue-saturation-light), 54%);
  --ifm-color-primary-lighter: hsl(
    var(--site-primary-hue-saturation-light),
    62%
  );
  --ifm-color-primary-lightest: hsl(
    var(--site-primary-hue-saturation-light),
    73%
  );
  --ifm-footer-background-color: #242526;

  --site-color-feedback-background: #fff;
  --site-color-favorite-background: #f6fdfd;
  --site-color-tooltip: #fff;
  --site-color-tooltip-background: #353738;
  --site-color-svgIcon-favorite: #e9669e;
  --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%);
  --custom-primary: #24b47e;
  --ifm-h1-font-size: 48px;
  --ifm-h2-font-size: 36px;
  --ifm-h3-font-size: 20px;

  --ifm-z-index-dropdown: 10;
  --ifm-z-index-fixed-mui: 11;
  --ifm-z-index-fixed: 14;
  --ifm-z-index-overlay: 16;
}

/* animate.css overwrite*/
:root {
  --animate-duration: 1.5s;
}

html[data-theme='dark'] {
  --site-color-feedback-background: #f0f8ff;
  --site-color-favorite-background: #1d1e1e;
  --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%);
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

html[data-theme='dark'] .docusaurus-highlight-code-line {
  background-color: rgba(66, 66, 66, 0.3);
}

.unique-tabs .tabs__item {
  line-height: 16px;
  margin-right: 8px;
}

.unique-tabs .tabs__item--active {
  border: 0;
  color: #fff;
  border-radius: var(--ifm-global-radius);
  background-color: var(--ifm-tabs-color-active);
}

html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] {
  fill: greenyellow;
}

html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] {
  fill: seagreen;
}

html[data-theme='light'] .DocSearch {
  /* --docsearch-primary-color: var(--ifm-color-primary); */
  /* --docsearch-text-color: var(--ifm-font-color-base); */
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(94, 100, 112, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-color-secondary-lighter);
  /* Search box */
  --docsearch-searchbox-background: var(--ifm-color-secondary);
  --docsearch-searchbox-focus-background: var(--ifm-color-white);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-white);
  /* Footer */
  --docsearch-footer-background: var(--ifm-color-white);
}

html[data-theme='dark'] .DocSearch {
  --docsearch-text-color: var(--ifm-font-color-base);
  --docsearch-muted-color: var(--ifm-color-secondary-darkest);
  --docsearch-container-background: rgba(47, 55, 69, 0.7);
  /* Modal */
  --docsearch-modal-background: var(--ifm-background-color);
  /* Search box */
  --docsearch-searchbox-background: var(--ifm-background-color);
  --docsearch-searchbox-focus-background: var(--ifm-color-black);
  /* Hit */
  --docsearch-hit-color: var(--ifm-font-color-base);
  --docsearch-hit-active-color: var(--ifm-color-white);
  --docsearch-hit-background: var(--ifm-color-emphasis-100);
  /* Footer */
  --docsearch-footer-background: var(--ifm-background-surface-color);
  --docsearch-key-gradient: linear-gradient(
    -26.5deg,
    var(--ifm-color-emphasis-200) 0%,
    var(--ifm-color-emphasis-100) 100%
  );
}

/*
div[class^='announcementBar_'] {
  --site-announcement-bar-stripe-color1: hsl(
    var(--site-primary-hue-saturation),
    85%
  );
  --site-announcement-bar-stripe-color2: hsl(
    var(--site-primary-hue-saturation),
    95%
  );
  background: repeating-linear-gradient(
    35deg,
    var(--site-announcement-bar-stripe-color1),
    var(--site-announcement-bar-stripe-color1) 20px,
    var(--site-announcement-bar-stripe-color2) 10px,
    var(--site-announcement-bar-stripe-color2) 40px
  );
  font-weight: bold;
}
*/

div[class^='announcementBar_'] .clean-btn {
  color: white;
}

.red > a {
  color: red;
}

.screen-reader-only {
  border: 0;
  clip: rect(0 0 0 0);
  -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}

html[data-theme='light'] img[src$='#gh-dark-mode-only'],
html[data-theme='dark'] img[src$='#gh-light-mode-only'] {
  display: none;
}

/* Used to test CSS insertion order */
.test-marker-site-custom-css-unique-rule {
  content: 'site-custom-css-unique-rule';
}


/*
 * Customize
 */
.grecaptcha-badge {
  visibility: hidden;
}

.navbar-item-tidb-cloud:before {
  content: '';
  height: 1.3em;
  width: 100px;
  display: flex;
  align-items: center;
  justify-items: center;
  background-image: url("/img/tidb-cloud-logo-o.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.navbar-item-twitter:before {
  content: '';
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-items: center;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M23.643 4.937c-.835.37-1.732.62-2.675.733.962-.576 1.7-1.49 2.048-2.578-.9.534-1.897.922-2.958 1.13-.85-.904-2.06-1.47-3.4-1.47-2.572 0-4.658 2.086-4.658 4.66 0 .364.042.718.12 1.06-3.873-.195-7.304-2.05-9.602-4.868-.4.69-.63 1.49-.63 2.342 0 1.616.823 3.043 2.072 3.878-.764-.025-1.482-.234-2.11-.583v.06c0 2.257 1.605 4.14 3.737 4.568-.392.106-.803.162-1.227.162-.3 0-.593-.028-.877-.082.593 1.85 2.313 3.198 4.352 3.234-1.595 1.25-3.604 1.995-5.786 1.995-.376 0-.747-.022-1.112-.065 2.062 1.323 4.51 2.093 7.14 2.093 8.57 0 13.255-7.098 13.255-13.254 0-.2-.005-.402-.014-.602.91-.658 1.7-1.477 2.323-2.41z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.clearTable th, .clearTable td {
  border-top: unset;
  border-left: unset;
  border-right: unset;
}

.clearTable th {
  font-weight: 700;
}

.clearTable tr {
  border-top: unset;
  background-color: unset;
}

.clearTable thead tr {
  border-bottom: unset;
}

.clearTable tr:nth-child(2n) {
  background-color: unset;
}

.navbar__logo {
  height: 44px;
  margin-right: 16px;
}

.navbar__brand {
  margin-right: 0;
}

.navbar__toggle {
  margin-right: 0;
  margin-left: 8px;
}

.rotate-180 {
  rotate: 180deg;
}

.animated-down-icon {
  animation-name: down-icon;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes down-icon {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  50% {
    transform: translateY(0);
    opacity: 0.6;
  }
  100% {
    transform: translateY(7px);
    opacity: 0;
  }
}

hr.MuiDivider-root {
  background-color: unset;
}

/* Sidebar Method labels */
.api-method > .menu__link {
  align-items: center;
  justify-content: start;
}

.api-method > .menu__link::before {
  width: 50px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 0.25rem;
  margin-right: 8px;
  text-align: center;
  flex-shrink: 0;
  border: 1px solid transparent;
  color: white;
}

.get > .menu__link::before {
  content: "get";
  background-color: var(--openapi-code-green);
}

.post > .menu__link::before {
  content: "post";
  background-color: var(--openapi-code-green);
}

.delete > .menu__link::before {
  content: "del";
  background-color: var(--openapi-code-red);
}

.put > .menu__link::before {
  content: "put";
  background-color: var(--openapi-code-blue);
}

.patch > .menu__link::before {
  content: "patch";
  background-color: var(--openapi-code-orange);
}

.head > .menu__link::before {
  content: "head";
  background-color: rgba(0, 0, 0, 0.4);
}

.event > .menu__link::before {
  content: "event";
  background-color: rgba(0, 0, 0, 0.5);
}